Objetivo

Neste documento informo como tratar cada tipo de dado do JSON da maneira mais simples possível para que num documento posterior agreguemos inteligência ao processo de maneira que o código não fique tão 'engessado' aos exemplos desta página, como, por exemplo, determinar automaticamente quantos elementos o array JSON tem.

JSON.array

É um dos tipos primitivos de dados mais usados e o que faz ele ser um array é simplesmente uma sequencia de valores separados por vírgulas. Mas só para ilustrar como extrair os dados vou adicionar itens comuns de dados com o Array. Veja Exemplo abaixo.

JSON.array - Código

myArray = {"nome":"Juca","idade": 30,"carangas":["Ford", "BMW", "Fiat"]}

Explicação

Podemos notar que o JSON acima tem vírgulas.

Cada vírgula delimita um item mas, não faz o objeto myJSONArray ser um array mas sim uma sequencia de itens comuns (2) e um array e por isso chamamos ele de um objeto JSON, porque tem uma mistura de tipos de elementos JSON.

No JSON acima, da esquerda para a direita, temos primeiramente seu nome : myJSONArray

A seguir temos 2 itens de dados comuns, cada um deles com nome e valor.

O nome fica a esquerda do : e o valor a direita do :

Portanto temos um string chamado 'nome' com o valor 'Juca'. Note as aspas informando que é um string.

Temos outro string chamado 'idade', mas o valor é 30 numérico. Note que o 30 não tem aspas e isso faz dele um valor numérico.

Finalmente temos um array chamado 'carangas' composto por 3 valores : ["Ford", "BMW", "Fiat"]

Os colchetes indicam que é um array(vetor).

Note que o array tem um só nome ( carangas ) e 3 valores ("Ford", "BMW", "Fiat") portanto para pegar cada um desses valores usaremos o nome e um número ( chamamos ele de índice ) indicando qual dos elementos queremos pegar. Por exemplo, carangas[0] pega o primeiro elemento,carangas[1] pega o segundo elemento e carangas[2] pega o terceiro elemento.

Como extrair os dados

myArray.nome; é como extraímos o campo chamado nome do JSON
myArray.idade; é como extraímos o campo chamado idade do JSON
myArray.carangas[0]; é como extraímos o primeiro veículo do campo chamado carangas do JSON
myArray.carangas[1]; é como extraímos o segundo veículo do campo chamado carangas do JSON
myArray.carangas[2]; é como extraímos o terceiro veículo do campo chamado carangas do JSON

Valores extraídos do JSON

Valor do Campo nome:

Valor do Campo idade:

Primeiro item array carangas:

Segundo item array carangas:

Terceiro item array carangas:

Código

<script>
        function x() {
            myArray = {"nome":"Juca","idade": 30,"carangas":["Ford", "BMW", "Fiat"]}
            document.getElementById("Nome").value = myArray.nome;
            document.getElementById("Idade").value = myArray.idade;
            document.getElementById("Array0").value = myArray.carangas[0];
            document.getElementById("Array1").value = myArray.carangas[1];
            document.getElementById("Array2").value = myArray.carangas[2];
        }

</script>
Valor do Campo nome: <input type="text" id="Nome" /><br /><br />
Valor do Campo idade: <input type="text" id="Idade" /><br /><br />
Primeiro item array carangas: <input type="text" id="Array0" /><br /><br />
Segundo item array carangas: <input type="text" id="Array1" /><br /><br />
Terceiro item array carangas: <input type="text" id="Array2" /><br /><br />

Finalizando

Neste documento mostro a sintaxe básica para processar os elementos da maneira mais simples. Sabendo que a maneira mais simples funciona podemos avançar criando um código que exiba dinamicamente um array independente do número dos termos.